<template>
	<div class="admin">
		<el-card class="!border-none" shadow="never">
			<el-form class="mb-[-16px]" :model="formData" inline>
                <el-form-item label="物料信息">
                    <el-input v-model="formData.title"  @keyup.enter="resetPage" class="w-40" size="small" clearable placeholder="请输入物料信息"/>

					<!-- <el-input v-model="formData.title" @keyup.enter="resetPage"  class="w-40" size="small" clearable /> -->
				</el-form-item>
				<el-form-item label="报废仓库">
					<el-select class="w-40" v-model="formData.warehouse_id" @keyup.enter="resetPage"  multiple size="small" clearable>
						<el-option v-for="(item, index) in options.listColumn" :key="index" :label="item.title"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="分类">
					<el-tree-select class="w-40" @keyup.enter="resetPage"  :check-strictly="true" default-expand-all v-model="formData.cate_id"
						:data="options.jczq" :props="{ value: 'id', label: 'name'}" size="small" clearable multiple>
					</el-tree-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage" size="small">查询</el-button>
					<el-button @click="resetParams" size="small">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card v-loading="pager.loading" class="mt-2 !border-none" shadow="never">
			<div>
				<mtable :data="pager.lists" :type="typeTable" :list="options.tableTile" :operation="true"
					:tableheight="tableheight" @oncelldblclick="oncelldblclick" @handleAdds="handleAdds" :bill="false">
					<template #tool="{item}">
						<el-table-column v-if="item.display==1" sortable :label="item.name" show-overflow-tooltip
							:prop="item.value" :width="item.width">
							<template #default="{row}">
								<div v-if="item.name=='计量单位'&&row.category_id==15">
									{{row.unit_name_15}}
								</div>
								<div v-if="item.name=='计量单位'&&row.category_id!==15">
									<span>
										{{row.unit_name}}
									</span>
								</div>
								<div v-if="item.name=='报废数量'">
									<span v-if="row.category_id==15">
										{{row.quantity}}{{row.unit_name_15}}
									</span>
									<span v-else>
										{{row.quantity}}{{row.unit_name}}
									</span>
								</div>
								
								<div v-if="item.name=='分类'">
									<span v-for="(item,index) in row.cate_name" :key="index">
										<span v-if="row.category_id==item.id">{{item.name}}</span>
									</span>
								</div>
								<template v-if="item.name=='名称'">
									<el-button @click="onHovertitle(row)" size="small">{{row.title}}</el-button>
								</template>
								<div v-if="tableShowbut ==row.index& item.name=='总价（元）'">
									<p v-if="MouseShow">{{row.total_price}}</p>
									<el-input v-else v-model="row.total_price" clearable @blur="inputBlur(row)"
										size="small" @click.stop="onfocus" />
								</div>
								<div v-if="tableShowbut ==row.index& item.name=='总重（千克）'">
									<p v-if="MouseShow">{{row.total_price}}</p>
									<el-input v-else v-model="row.cargo_weight" clearable @blur="inputBlur(row)"
										size="small" @click.stop="onfocus" />
								</div>
								<div v-if="item.name=='从属设备'">
									<!-- <el-button @click="onHovertitles(row)" v-if="row.slave_name" size="small">
										{{row.slave_name}}
									</el-button> -->
									<butstyle @onHovertitles="onHovertitles" :row="row"></butstyle>
								</div>
							</template>
						</el-table-column>
					</template>
					<template #operation="{row}">
						<el-button type="primary" link @click="handleSee(row)">
							查看
						</el-button>
					</template>
				</mtable>
			</div>
			<div class="flex  justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
		<EdittablePopup v-if="showTable" ref="editRefs" :type="typeTable" @success="getLists" @close="onclo">
		</EdittablePopup>
		<see-popup v-if="showsee" ref="showseeRef" @success="getLists" @close="showsee = false" />
		<tableHovertitle v-if="Hovertitle" ref="HovertitleRef" @success="getLists" @close="Hovertitle = false">
		</tableHovertitle>
		<tableHover v-if="Hovertitles" :showImage="true"  ref="HovertitleRefs" @success="getLists" @close="Hovertitles = false">
		</tableHover>
		
	</div>
</template>

<script lang="ts" setup>
	import butstyle from '@/components/butstyle.vue'
	import {
		adminLists,
		admincheckActionPermissions,
		adminInventoryedit,
	} from '@/api/delete/list'
	import {
		adminUserBind
	} from '@/api/warehouse/list'
	import {
		adminListssmaterials
	} from '@/api/materials/list'
	import {
		usePaging
	} from '@/hooks/usePaging'
	import EditPopup from './edit.vue'
	import seePopup from './water.vue'
	import EdittablePopup from '@/components/settable/index.vue'
	import mtable from '@/components/table/index.vue'
	import tableHover from '@/components/table-hovers/index.vue'
	import tableHovertitle from '@/components/table-hovertitles-del/index.vue'
	import useAppStore from '@/stores/modules/inventory'
	import {
		getCommonFieldDisplay
	} from '@/api/tools/code'
	const route = useRoute()
	const pathing = ref(route.query)
	const typeTable = ref('scrap_detail')
	const MouseShow = computed(() => userStore.MouseShow)
	const userStore = useAppStore()
	const HovertitleRef = shallowRef<InstanceType<typeof EditPopup>>()
	const HovertitleRefs = shallowRef<InstanceType<typeof EditPopup>>()
	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
	const editRefs = shallowRef<InstanceType<typeof EdittablePopup>>()
	const showseeRef = shallowRef<InstanceType<typeof seePopup>>()
	const showsee = ref(false)
	const Hovertitle = ref(false)
	const Hovertitles = ref(false)
	const span = ref(12)
	// 表单数据
	const formData = reactive({
		warehouse_id: [],
		title: '',
		cate_id: ''
	})
	const tableShowbut = ref(null)
	const showEdit = ref(false)
	const showTable = ref(false)
	const options = reactive({
		listColumn: [] as any[],
		jczq: [] as any[],
		tableTile: [] as any[],
		useJurisdiction: ""
	})
	const onHovertitle = async (data : any) => {
		Hovertitle.value = true
		await nextTick()
		HovertitleRef.value?.open('edit')
		HovertitleRef.value?.setFormData(data)
	}
	const onHovertitles = async (data : any) => {
		Hovertitles.value = true
		await nextTick()
		HovertitleRefs.value?.open('edit')
		HovertitleRefs.value?.setFormData(data)
	}

	const oncelldblclick = (row : any) => {
		userStore.onMouseShow(false)
		tableShowbut.value = row.index
	}
	const {
		pager,
		getLists,
		resetParams,
		resetPage
	} = usePaging({
		fetchFun: adminLists,
		params: formData
	})
	//高扬修改
    //从属设备更改色号
    watch(
        () => pager.lists,
        (newValue,oldValue)=>{
            newValue.map(item => {
            if(item.slave_colour == 3)
        {item.slave_colour = 4;
        }});
        for (let i = 0; i < newValue.length; i++) {
			for (let j = 0; j < newValue[i].cate_name.length; j++) {
				if (newValue[i].cate_name[j].id == newValue[i].category_id) {
					newValue[i].cate_names = newValue[i].cate_name[j].name;
				}
			}
		}
	}, {
		deep: true
	});
    //高扬修改
    //从属设备更改色号
    // watch(
    //     () => pager.lists,
    //     (newValue,oldValue)=>{
    //         newValue.map(item => {
    //         if(item.slave_colour == 3)
    //     {item.slave_colour = 4;
    //     }})
    //     }
    // )

	const adminEditing = (val : any) => {
		adminInventoryedit(val).then((data : any) => {
			getLists()
		})
	}

	const handleAdds = async () => {
		showTable.value = true
		await nextTick()
		editRefs.value?.open('add')
	}

	const handleSee = async (data : any) => {
		showsee.value = true
		await nextTick()
		showseeRef.value?.open('edit')
		showseeRef.value?.setFormData(data)
	}
	const onclo = () => {
		showEdit.value = false
		getOptions()
	}
	const onfocus = () => {
		userStore.onMouseShow(false)
	}
	const inputBlur = (val : any) => {
		tableShowbut.value = null
		adminEditing(val)
	}
	const tableheight = ref(null)
	const heighting = () => {
		tableheight.value = parseInt(document.documentElement.clientHeight) - 155
	}
	const getOptions = () => {
		getCommonFieldDisplay({
			type: typeTable.value
		}).then((data : any) => {
			options.tableTile = data
		})
		adminUserBind({
			page_type: 0
		}).then((data : any) => {
			options.listColumn = data
		})
		admincheckActionPermissions().then((data : any) => {
			options.useJurisdiction = data.type10
		})
		adminListssmaterials({
			page_type: 0
		}).then((data : any) => {
			options.jczq = data
		})
	}

	onMounted(() => {
		heighting()
		getOptions()
		getLists()
		if (pathing.value) {
			if (pathing.value.id) {
				formData.title = pathing.value.id
			}
			if (pathing.value.ku) {
				formData.warehouse_id = JSON.parse(pathing.value.ku)
			}
			if (pathing.value.type) {
				formData.cate_id = pathing.value.type
			}
			resetPage()
		}
	})
</script>
<style scoped lang="scss">

</style>